<template>
  <div style="padding:.3rem .3rem 0 .3rem;flex-shrink: 0">
    <div class="company" @click="showChooseCompany = true" id="aaa" v-show="currentCompanyId>0">
      <div class="name">{{currentCompanyName}}</div>
      <div class="arrow"></div>
    </div>
    <popup  v-model="showChooseCompany" class="ssit-popup-top" :close-on-click-modal="true"  popup-transition="aaa"  min-width="90" max-width="90"  :min-height="35" :max-height="86" radius=".2rem">
      <div slot="header"></div>
      <div class="company-item" v-for="company in companyList" :class="{active:currentCompanyId==company.id}" @click="choose(company.id,company.name)">
        {{company.name}}
      </div>
    </popup>
  </div>

</template>
<script>
  import {apiConstants} from '@/js/utils';
  import popup from 'ssit-mobile-popup';
  export default {
    props: ["companyId"],
    data() {
      return {
        showChooseCompany:false,
        companyList:[],
        currentCompanyId:-1,
        currentCompanyName:""
      }
    },
    components: {popup},
    created() {
      this.loadCompanyList();
    },
    methods: {
      loadCompanyList(){
        let _this = this;
        this.$ajax(apiConstants.company_getAgentCompanyList, {
          data: {},
          success: function (data) {
            _this.companyList = data || [];
            if(_this.companyList.length==0){
              _this.$emit("no-data")
            }else{
              let index = _this.companyList.findIndex(item=>{return item.id==_this.companyId});
              index = index>=0?index:0;
              _this.currentCompanyId = _this.companyList[index].id
              _this.currentCompanyName = _this.companyList[index].name
            }
          }
        })
      },
      choose(id,name){
        this.currentCompanyId = id;
        this.currentCompanyName = name;
        this.showChooseCompany = false;
      }
    },
    watch:{
      currentCompanyId(){
        this.$emit("company-change",this.currentCompanyId);
      }
    }
  }

</script>
<style lang="scss" scoped>
  @import "../../styles/libs/minxin";
  .ssit-popup{
    background: #F5F6F8!important;
  }
  .ssit-popup-top{
    top:7vh;
    border-radius: .2rem;
  }
  .company{
    display: flex;
    flex-direction: row;
    align-items: center;
    .name{
      font-size: .32rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
      max-width: 90%;
      @include textrow;
    }
    .arrow{
      width: .23rem;
      height: .13rem;
      background: url("/images/login/downPoihntPic.png");
      background-size: 100% 100%;
      margin:0 0.15rem;
    }
  }
  .company-item{
    padding: .3rem ;
    border-bottom:1px solid  #F4F6F8;
    font-size: .32rem;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    font-weight: 400;
    color: #333333;
    flex-shrink: 0;
    @include textrow
  }
  .active{
    background: #F4F9FF;
    color:#005EED;
  }
</style>
